<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa"></u-search>
            </view>
        </view>

        <scroll-view class="list" :scroll-y="true" :refresher-triggered="refresh" :refresher-enabled="true"
            @refresherrefresh="onRefresh" @scrolltolower="scrollTolower" :style="{ height: `${height}px` }">
            <view class="item" v-for="item in list" :key="item.id">
                <navigator :url="`/pages/validate/info?code=${item.code}`">
                    <view class="title">
                        {{ item.products.name }}
                    </view>
                </navigator>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">
                            {{ item.num ? item.num : 0 }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value" @click="onCopy(item.code)">
                            {{ item.code }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">
                            {{ item.query_time_text }}
                        </view>
                    </view>

                    <view class="son-item" @click="onCode(item)">
                        <view class="name">
                            二维码：
                        </view>
                        <view class="value">
                            <image src="/static/images/code.png" />
                        </view>
                    </view>
                </view>
            </view>

            <u-loadmore :status="status" />
        </scroll-view>

        <u-popup :show="CodeShow" :round="10" mode="center" @close="onClose">
            <view class="qrcode">
                <u--image :showLoading="true" :src="qrcode" width="240px" height="240px"></u--image>
            </view>
        </u-popup>

        <!-- 引入信息提示 -->
		<u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            refresh: false,// 下拉刷新状态
            finished: false,// 上拉加载状态
            list: [],
            page: 1,
            limit: 3,
            business: {},
            status: 'loadmore',
            keyword: '',   //搜索值
            height: 0,
            business: {},
            CodeShow: false,
            qrcode: null
        }
    },
    methods: {
        //更新
        onRefresh() {
            this.list = [];
            this.page = 1;
            this.refresh = true;
            this.finished = false;
            this.status = 'loading'

            setTimeout(this.getProductData, 1500);
        },
        //下拉刷新的
        scrollTolower() {
            this.getProductData();
        },
        async getProductData() {
            if (this.refresh === true) {
                this.refresh = false;
            }

            let params = {
                busid: this.business.id,
                page: this.page,
                keyword: this.keyword,
                limit: this.limit
            }

            let result = await uni.$u.http.post('/business/product', params);

            if (result.code === 1) {
                this.list = this.list.concat(result.data);

                this.page = this.page + 1;
            } else {
                this.finished = true;
                this.status = 'nomore'
            }
        },
        //点击二维码
        async onCode(item) {
            if (item.query_qrcode) {
                this.CodeShow = true;
                this.qrcode = item.query_qrcode_cdn;
            } else {
                let params = {
                    busid: this.business.id,
                    code: item.code
                }

                let result = await uni.$u.http.post('/business/generate', params)

                if (result.code === 1) {
                    this.CodeShow = true;

                    this.qrcode = result.data.query_qrcode_cdn;
                }
            }
        },
        //关闭二维码
        onClose() {
            this.CodeShow = false;
        },
        //点击防伪码事件
        onCopy(code) {
            uni.setClipboardData({
                data: code,
                showToast: false,
                success: (res) => {
                    uni.hideToast();
                    this.$refs.uToast.show({
                        message: '防伪码已复制'
                    });
                }
            })
        }
    },
    //页面初始化时，加载数据
    onReady() {
        uni.getSystemInfo({
            success: (res) => {
                // 获取窗口高度
                this.height = res.windowHeight;
            }
        })
    },
    //预加载之前
    onShow() {
        let business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};

        // 把对象转成数组
        if (Object.getOwnPropertyNames(business).length > 0) {
            this.business = business;
        }

        this.getProductData();
    }

}
</script>

<style>
page {
    background-color: #eee;
}

.container {
    width: 95%;
    margin: 0 auto;
}

.header {
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
    position: sticky;
    top: 0px;
}

.header .search {
    width: 95%;
    margin: 0 auto;
}

.item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    padding: 0 10px 10px;
}

.item .title {
    padding: 10px 0 10px 10px;
    font-size: 20px;
}

.item .line {
    width: 100%;
    height: 1px;
    background: #ebebeb;
    margin: 0 auto;
    margin-bottom: 10px;
}

.item .son-list .son-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
}

.item .son-list .son-item .name {
    color: #9b9b9a;
}

.item .son-list .son-item image {
    width: 30px;
    height: 30px;
}

.qrcode {
    background-color: #fff;
    padding: 10px;
}
</style>